<!--
 * @Descripttion: 
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-20 17:18:52
 * @LastEditors: daipeng
 * @LastEditTime: 2020-10-27 17:01:15
-->
<template>
	<div>
		<div id="mychart1" style="height: 320px; width: 100%;"></div>
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')
import { mainfun } from '../../../../../assets/js/main.js'
export default {
	props: {},
	data() {
		return {
			url: common.url,
			str1: [], //日期
			str2: [] //数据值
		}
	},
	props: ['dayOne'],
	watch: {
		dayOne(newName, oldName) {
			this.dayOne = newName
			this.getdata()
		}
	},
	created() {
		//数据请求
		this.getdata()
	},
	methods: {
		getdata() {
			// 先重置数据
			this.str1 = []
			this.str2 = []
			let fn = new FormData()
			fn.append('day', this.dayOne) //近n天的数据
			this.$http.post(this.url + '/index/expressHistoryTask', fn).then(
				res => {
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						var echars_date = res.data.data
						echars_date.forEach(element => {
							this.str1.push(element.date)
							this.str2.push((element.hour_actual_finish / 3600).toFixed(2)) //秒转小时
						})
						this.init() //初始化
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		init() {
			this.mychart1 = this.$echarts.init(document.getElementById('mychart1'))

			var that = this

			this.mychart1.setOption({
				tooltip: {
					trigger: 'axis'
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: that.str1
				},
				yAxis: {
					type: 'value',
					scale: true
					// max: 1520000,
					// min: 1400000,
					// splitNumber: 4
				},
				series: [
					{
						name: '累计时长',
						type: 'line',
						data: that.str2,
						itemStyle: {
							normal: {
								color: '#d38651',
								lineStyle: {
									width: 3
								}
							}
						},
						label: {
							show: false
						}
					}
				]
			})
		}
	}
}
</script>

<style scoped></style>



// WEBPACK FOOTER //
// src/components/components/echarts/One.vue